<template>
  <div class="aui-card-list">
    <el-card shadow="never" class="aui-card-list-body">
      <el-tabs v-model="activeName" @tab-click="tabsClick">
        <el-tab-pane :label="$t('approveManage.todo')" name="todo"></el-tab-pane>
        <el-tab-pane :label="$t('approveManage.done')" name="done"></el-tab-pane>
      </el-tabs>
      <todo ref="todo" v-if="this.activeName==='todo'"></todo>
      <done ref="done" v-if="this.activeName==='done'"></done>
    </el-card>
  </div>
</template>

<script>
import todo from './agent-todo'
import done from './agent-done'
export default {
  data () {
    return {
      activeName: 'todo'
    }
  },
  activated () {
    this.activatedTab()
  },
  components: { todo, done },
  methods: {
    tabsClick () {
      this.$nextTick(() => {
        this.activatedTab()
      })
    },
    activatedTab () {
      if (this.activeName === 'todo') {
        this.$refs.todo.getDataList()
      } if (this.activeName === 'done') {
        this.$refs.done.getDataList()
      }
    }
  }
}
</script>

<style>
</style>
